import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { ColumnsType, TableProps } from '_antd@4.24.12@antd/es/table';
import ActivityTable from '@/pages/dashboard/workplace/components/ActivityTable';
import {
  Typography,
  PageHeader,
  Row,
  Tag,
  Table,
  Card,
  Tabs,
  Button,
  Modal,
  Form,
  Input,
  DatePicker,
  Select,
  Upload,
  message
} from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import type { TabsProps } from 'antd';
const { Option } = Select;
const { TextArea } = Input;
const { Paragraph } = Typography;//说明文字的标签
import {
  getactivityList,
} from '@/services/workplace'
import { getActivityByTeacher } from '@/services/activityInfo';
import { createParent } from '@/services/fileService';

const ActivityList: React.FC = () => {
  const [activeList, setactiveList] = useState(null);//全部活动
  const [levelZeroData, setLevelZeroData] = useState(null);//我的活动
  const [modalVisible, setModalVisible] = useState(false);//控制 Modal 的显示与隐藏：
  const [form] = Form.useForm();//表单对象
  const [fileList, setFileList] = useState([]);
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: `全部`,
      children: <ActivityTable activeList={activeList} />,
    },
    {
      key: '2',
      label: `我创建的活动`,
      children: <ActivityTable activeList={levelZeroData} />,
    },
  ];
  useEffect(() => {
    try {
      getactivityList(null, null).then((response: any)=>{
        if (response && response.result) {
          setactiveList(response.result);
        }
      })
      getActivityByTeacher().then((response: any)=>{
        if (response && response.result) {
          setLevelZeroData(response.result);
        }
      })
    } catch (error) {
      console.error('Error fetching user info:', error);
    }
  }, [])
  //说明文字标签定义
  const content = (
    <>
      <Paragraph>
        河北工业大学电气工程学院举办系列活动具有重要意义。这些活动展示学院实力，拓宽学生知识面，培养实践能力，加强团队合作，并与专家、企业交流。活动提供实践锻炼，促进学术水平提高，培养学生综合素质，推动学院与业界合作。
      </Paragraph>
      <Paragraph>
        这些活动为电气工程学院提供了一个展示学院实力和学生才华的窗口。通过举办各类学术讲座、科技竞赛、创新创业活动等，学院能够吸引更多的人关注学院的教学质量和实践能力，提升学院的知名度和声誉。
      </Paragraph>
      <Paragraph>
        这些活动为学生提供了一个实践和锻炼的平台。通过参与活动，学生可以将在课堂上学到的知识应用到实际情境中，培养解决问题和创新思维的能力。
      </Paragraph>
    </>
  );
  //学生图像标签定义
  const Content = ({ children, extraContent }: any) => (
    <Row>
      <div style={{ flex: 1 }}>{children}</div>
    </Row>
  );

  const handleNewActivityClick = () => {
    setModalVisible(true);
  };
  const handleModalOk = () => {
    // 处理表单提交逻辑
    const formValues = form.getFieldsValue();
    formValues.startTime = formValues.startTime.format('YYYY-MM-DD HH:mm:ss');
    formValues.endTime = formValues.endTime.format('YYYY-MM-DD HH:mm:ss');
    formValues.registrationDeadline = formValues.registrationDeadline.format('YYYY-MM-DD HH:mm:ss');
    formValues.teaName = window.localStorage.userName;
    formValues.teaCode = window.localStorage.userAccount;
    console.log(formValues); // 这里打印整个表单的值对象

    const formData = new FormData();
    formData.append('activityAddress', formValues.activityAddress);
    formData.append('activityCategory', formValues.activityCategory);
    formData.append('activityContent', formValues.activityContent);
    formData.append('activityLabel', formValues.activityLabel);
    formData.append('activityLevel', formValues.activityLevel);
    formData.append('activityObjective', formValues.activityObjective);
    formData.append('endTime', formValues.endTime);
    formData.append('guest', formValues.guest);
    formData.append('guestTitle', formValues.guestTitle);
    formData.append('isPublished', formValues.isPublished);
    formData.append('needApproval', formValues.needApproval);
    formData.append('needFile', formValues.needFile);
    formData.append('organizationalUnit', formValues.organizationalUnit);
    formData.append('registrationDeadline', formValues.registrationDeadline);
    formData.append('startTime', formValues.startTime);
    formData.append('teaCode', formValues.teaCode);
    formData.append('teaName', formValues.teaName);
    if (fileList.length != 0 && fileList){
      for (let i = 0; i < fileList.length; i++) {
        formData.append('upload', fileList[i].originFileObj);
      }
    }
    for (const pair of formData.entries()) {
      console.log(pair[0] + ": " + pair[1]);
    }
    createParent('',formData).then((res: any)=>{
      if (res.code == '200')message.success("创建成功")
      else message.error("创建失败")
    })
    setModalVisible(false);
  };
  const handleModalCancel = () => {
    setModalVisible(false);
  };
  return (
    <PageContainer>
      <Card style={{ marginBottom: 24 }}>
        <PageHeader
          title="热门活动"
          subTitle="教师"
          tags={<Tag color="blue">运行中</Tag>}
          avatar={{ src: require('@/assets/activity.jpg') }}
          extra={
            <Button onClick={handleNewActivityClick} type="primary">
              新建活动
            </Button>
          }
        >
          <Content >
            {content}
          </Content>
        </PageHeader>

      </Card>
      <Card style={{ marginBottom: 24 }}>
        <Tabs defaultActiveKey="1" items={items} />
      </Card>

      {/* Modal 表单 */}
      <Modal
        title="创建新活动"
        visible={modalVisible}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
      >
        <Form form={form}>
          {/* activityLabel */}
          <Form.Item label="活动名称" name="activityLabel" rules={[{ required: true, message: '请输入活动名称' }]}>
            <Input />
          </Form.Item>
          {/* 活动内容 */}
          <Form.Item label="活动内容" name="activityContent" rules={[{ required: true, message: '请输入活动内容' }]}>
            <TextArea />
          </Form.Item>
          {/* 活动开始时间 */}
          <Form.Item label="活动开始时间" name="startTime" rules={[{ required: true, message: '请选择活动开始时间' }]}>
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          {/* 活动截止时间 */}
          <Form.Item label="活动截止时间" name="endTime" rules={[{ required: true, message: '请选择活动截止时间' }]}>
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          {/* 报名截止时间 */}
          <Form.Item label="报名截止时间" name="registrationDeadline" rules={[{ required: true, message: '请选择报名截止时间' }]}>
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          {/* 活动地点 */}
          <Form.Item label="活动地点" name="activityAddress" rules={[{ required: true, message: '请输入活动地点' }]}>
            <Input />
          </Form.Item>
          {/* 活动等级 */}
          <Form.Item label="活动等级" name="activityLevel" rules={[{ required: true, message: '请选择活动级别' }]}>
            <Select>
              <Option value="0">国家级</Option>
              <Option value="1">省级</Option>
              <Option value="2">校级</Option>
              <Option value="3">院级</Option>
            </Select>
          </Form.Item>
          {/* 活动培养类别 */}
          <Form.Item label="活动培养类别" name="activityCategory" rules={[{ required: true, message: '请选择活动培养类别' }]}>
            <Select>
              <Option value="0">活动竞赛</Option>
              <Option value="1">评奖评优</Option>
              <Option value="2">学生组织</Option>
            </Select>
          </Form.Item>
          {/* 活动培养目标 */}
          <Form.Item label="活动培养目标" name="activityObjective" rules={[{ required: true, message: '请选择活动培养目标' }]}>
            <Select>
              <Option value="0">理想信念</Option>
              <Option value="1">文化艺术</Option>
              <Option value="2">社会工作</Option>
              <Option value="3">实践服务</Option>
              <Option value="4">学术科技</Option>
              <Option value="5">体育素质</Option>
            </Select>
          </Form.Item>
          {/* 组织方 */}
          <Form.Item label="组织方" name="organizationalUnit" rules={[{ required: true, message: '请输入组织方' }]}>
            <Input />
          </Form.Item>
          {/* 是否公开 */}
          <Form.Item label="是否发布" name="isPublished" rules={[{ required: true, message: '请选择是否公开' }]}>
            <Select>
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Form.Item>
          {/* 是否需要上传附件 */}
          <Form.Item label="是否需要上传附件" name="needFile" rules={[{ required: true, message: '请选择是否需要上传附件' }]}>
            <Select>
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Form.Item>
          {/* 是否需要审批 */}
          <Form.Item label="报名是否需要审批" name="needApproval" rules={[{ required: true, message: '请选择是否需要审批' }]}>
            <Select>
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Form.Item>
          {/* 嘉宾姓名 */}
          <Form.Item label="嘉宾姓名" name="guest">
            <Input />
          </Form.Item>
          {/* 嘉宾头衔 */}
          <Form.Item label="嘉宾头衔" name="guestTitle">
            <Input />
          </Form.Item>
          {/* 上传附件按钮 */}
          <Form.Item label="上传附件" name="upload">
            <Upload
              beforeUpload={()=>(false)}
              fileList={fileList}
              onChange={({ fileList: newFileList }) => setFileList(newFileList)}
            >
              <Button icon={<UploadOutlined />}>上传附件</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  )
}

export default ActivityList;
